<template>
  <div class="page page-user">
    <c-content
      :page.sync="pages.page"
      :pagesize.sync="pages.pagesize"
      :total.sync="pages.totalRow"
      @pagination="pageChange"
    >
      <!-- 查询 -->
      <el-form
        slot="search"
        :inline="true"
        class="search-form"
        label-width="80px"
        @submit.native.prevent
      >
        <el-form-item class="search-btn">
          <el-button v-waves type="primary" @click="openXM" size="mini"
            >新增</el-button
          >
        </el-form-item>
        <el-form-item label="登录账号">
          <el-input
            v-model="form.username"
            placeholder="请输入登录账号"
            clearable
            @keyup.enter.native="getList()"
            @clear="getList()"
          />
        </el-form-item>
        <!--        <el-form-item label="昵称">-->
        <!--          <el-input v-model="form.nickName" placeholder="请输入昵称" clearable @keyup.enter.native="getList()" @clear="getList()" />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="状态">-->
        <!--          <el-select-->
        <!--              v-model="form.status"-->
        <!--              clearable-->
        <!--              filterable-->
        <!--              placeholder="请选择状态"-->
        <!--              @change="getList()">-->
        <!--            <el-option value="1" label="正常" />-->
        <!--            <el-option value="0" label="禁用" />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
      </el-form>
      <!-- 展示 -->
      <el-table
        slot="table"
        ref="multipleTable"
        v-loading="tab_loading"
        width="100%"
        border
        :data="dataList"
        class="expand--table"
      >
        <el-table-column align="center" prop="username" label="登录账号" />
        <el-table-column align="center" prop="nickName" label="昵称" />
        <el-table-column
          align="center"
          label="角色"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.roleName }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#85CE61"
              inactive-color="#ff4949"
            >
            </el-switch>
            <span v-if="scope.row.status == 1" style="padding-left: 3px;"
              >正常</span
            >
            <span v-else style="padding-left: 3px;">禁用</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="create_time_text"
          label="最后操作时间"
        />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <c-button>
              <span @click="openXM(scope.row)">编辑</span>
              <span @click="handleDel(scope.row)" class="danger">删除</span>
            </c-button>
          </template>
        </el-table-column>
      </el-table>
    </c-content>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserList, deleteUser, toggleAdminState } from '@/api/user'
import AddEdit from './XM/AddEditAccount'
export default {
  components: {
    CContent: () => import('@/components/CContent'),
    CButton: () => import('@/components/CButton'),
  },
  computed: {
    ...mapGetters(['btn_permission']),
  },
  data() {
    return {
      tab_loading: false,
      pages: this.$mpages,
      form: {},
      dataList: [],
    }
  },
  created() {
    this.$getReset()
    this.getList()
  },
  methods: {
    /* 查询 */
    async getList() {
      const obj = JSON.parse(JSON.stringify(this.form))
      Object.assign(obj, this.pages)
      this.tab_loading = true
      const res = await getUserList(obj)
      this.tab_loading = false
      this.dataList = res.data.data.map((item) => {
        item.status = item.status ? true : false
        return item
      })
      this.pages.totalRow = res.data.totalRow
    },
    /* 启用和禁用 */
    async changeStatus(row) {
      return false
      let obj = { id: row.id, status: row.status }
      const { code } = await toggleAdminState(obj)
      if (code === 200)
        this.$message({
          message: (row.status == '0' ? '禁用' : '启用') + '成功',
          type: 'success',
        })
      this.getList()
    },
    /* 删除账号 */
    handleDel(row) {
      this.$confirm('确认删除此账号?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await deleteUser(row.id)
          if (res.status == 200) {
            this.$message({ message: '删除成功', type: 'success' })
            this.getList()
          }
        })
        .catch(() => {})
    },
    /* 添加和编辑 */
    openXM(row) {
      this.$layer.iframe({
        shadeClose: false,
        content: {
          content: AddEdit,
          parent: this,
          data: { row: row },
        },
        maxmin: true,
        area: ['500px', '400px'],
        title: row.id ? '编辑账号' : '添加账号',
      })
    },
    /* 页码改变 */
    pageChange(param) {
      if (param.type === 'index') this.pages.page = param.val
      if (param.type === 'sizes') this.pages.totalRow = param.val
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped></style>
